{extend name="index/index" /}

{block name="main"}
<style>
    body {
        background-color: #f5f5f5;
    }

    #header_top {
        height: 50px;
    }

    #masonry {
        margin-top: 20px;
    }

    .gg {
        position: relative;
    }

    .close {
        background: url('/static/home/images/close.png') left top no-repeat;
        z-index: 99996;
        display: block;
        cursor: pointer;
        position: absolute;
        display: block;
        width: 30px;
        height: 30px;
        right: 0;
        top: 0;
    }

    .close:hover {
        background-color: #444;
    }

    .pic-photo {
        width: 236px;

    }

    .box {
        margin-bottom: 20px;
        float: left;
        width: 236px;
        background: #fff;
        border-radius: 3px;
    }

    .box .works-info {
        margin-bottom: 0;
        padding: 10px 20px 10px 10px;
        font-size: 13px;
        border-bottom: 1px #ccc solid;
    }

    .box img {
        max-width: 100%
    }

    .box .user-add {
        padding: 0 15px;
        margin: 16px 0;
    }

    .box .add-src {
        font-size: 13px;
        padding: 0 0 0 45px
    }

    .box .add-src a {
        color: #9E7E6B;
    }

    .box .add-src span {
        color: #999;
    }

    .box .user-add a .head-p {
        float: left;
        width: 34px;
        height: 34px;
        border-radius: 50%;
    }

    .box .user-add .add-src p {
        padding: 0 0 0 0;
    }
    .pic-photo .box{
        transition: box-shadow .5s, transform .5s;
    }
    .pic-photo .box:hover {
        cursor: pointer;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        transform: translate(0, -2px);

    }

    #masonry .pic-photo .box img:first-child:hover {
        opacity: 0.8;
    }

    #userinfo {
        padding: 16px;
    }

    #userinfo a {
        color: #0b0b0b;
    }

    #userinfo .user-name:hover {
        color: red;
    }

    #userinfo .userset {
        background: url('/static/home/test/icon_setting.png') 10px 20px no-repeat;
        display: block;
        width: 35px;
        height: 54px;
        background-color: #fff;
        position: absolute;
        top: 15px;
        right: 12px;
    }

    .add-pic-a {
        display: flex;
        flex-direction: row;
        height: 50px;
        padding: 0;
        padding: 10px 0;
        border-top: 0 none;
        border-bottom: 0 none;
        border-width: 1px 0;
        background: #FFF;
    }

    .add-pic-a a:hover {
        background-color: #F2F2F2
    }

    .add-pic-a a {
        width: 67px;
        height: 50px;
        padding: 5px 0;
        display: inline-block;
        font-size: 12px;
        text-align: center;
        color: #999;
        text-decoration: none;
    }

    .add-pic-a a strong {
        font-size: 15px;
    }

    .add-pic-a a p {
        color: #999;
    }

    .pic-photo .box .add-cj {
        position: absolute;
        z-index: 3;
        top: 6px;
        right: 6px;
        left: 6px;
        display: none;
    }

    .pic-photo .box:hover .add-cj {
        display: block;
    }


    .pic-photo .add-cj .left-btn {
        float: left;
        width: 56px;
    }

    .pic-photo .add-cj .left-btn button {
        border: none;
        display: inline-block;
        line-height: 30px;
        height: 30px;
        width: 56px;
        font-size: 14px;
        background-color: rgb(236, 65, 77);
        border-radius: 3px;
        text-align: center;
        color: #fff;
        outline: none;
    }

    .pic-photo .add-cj .right-btn {
        float: right;
    }

    .pic-photo .add-cj .right-btn button {
        height: 30px;
        width: 40px;
        line-height: 30px;
        background: url('/static/home/test/action_like.svg') 0px -20px no-repeat;
        background-position: 14px 9px;
        border: none;
        border-radius: 3px;
        background-color: #d9d8d8;
        outline: none;
    }

    .pic-photo .clearfloat:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0
    }

    .pic-photo .clearfloat {
        zoom: 1
    }

    /*采集图片模态框*/
    #cai-pic {
        /*padding: 20px 20px;*/
    }

    .frame-content {
        width: 700px;
    }

    .content-left {
        width: 300px;
        height: 500px;
        padding: 20px 20px;
        background-color: #F2F2F2;
        float: left;
    }

    .content-left .your-pic .yp {
        width: 220px;
        max-height: 300px;
        overflow: hidden;
        margin: 0 auto;
    }

    .content-left .your-pic img {
        width: 220px;
    }

    .content-left .desc {
        margin-top: 10px;
        width: 220px;
        height: 70px;
        background-color: #F2F2F2;
        border: none;
        resize: none;
        outline: none;
        transition: all 0.5s;

    }
    .bq {
        width: 220px;
        margin: 10px auto;
    }


    .content-left .desc::-webkit-input-placeholder { /* WebKit browsers */
        color: #666666;
        font-size: 12px
    }

    .content-left .desc:hover {
        background-color: #e6e6e6;
    }

    .content-left .biaoqian {
        margin: 0 auto;
        /*height: 80px;*/
        width: 220px;
        background-color: #fff;
        position: relative;
        /*padding: 5px 5px;*/
        border: 1px solid #cccccc;

    }

    .content-left .biaoqian input {
        position: absolute;
        width: 220px;
        height: 80px;
        outline: none;
        border: none;
        font-size: 20px;
    }

    .content-left .biaoqian .bq {
        padding: 5px 5px;
        text-align: center;
        background-color: #F2F2F2;
        position: absolute;
        display: none;
    }

    .content-right {
        height: 500px;
        width: 398px;
        padding: 20px 20px;
        background-color: #fff;
        float: right;
    }

    .content-right p {
        font-size: 20px;
    }

    .content-right p input {
        height: 40px;
        width: 300px;
        max-width: 100%;
        outline: none;
        border: 1px solid #cccccc;
        font-size: 18px;
    }
    #search-a::-webkit-input-placeholder{
        color: #ccc;
        font-size: 15px;
    }
    .content-right .reminder{
        width: 300px;
        padding: 10px 20px;
        background-color: #f7f7f7;
        
    }
    .content-right .reminder span:first-child{
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('/static/home/test/notice_icons_18.svg') 0 0 no-repeat;
        background-position: 0 -40px;
        vertical-align: top;
        margin-right: 8px;
    }
    .content-right .reminder .yet a{
        color: #c90000;
    }
    .content-right .addto-a ul li{
        line-height: 30px;
        height: 30px;
        padding-left: 20px;
        cursor: pointer;
    }
    .content-right .addto-a ul li button{
        border: none;
        display: inline-block;
        line-height: 30px;
        height: 30px;
        width: 56px;
        font-size: 14px;
        background-color: rgb(236, 65, 77);
        border-radius: 3px;
        text-align: center;
        color: #fff;
        outline: none;
        float: right;
        right: 0;
        display: none;
    }


</style>

<!--广告-->
<div class="gg">
    <div class="close"></div>
    <img src="/static/home/images/gg.png" width="100%">
</div>
<!--用户采集信息 第一个框-->
<div id="masonry" class="container-fluid grid">
    <div class="pic-photo">
        <div class="box" id="userinfo">
            <a href="#"><img src="/static/home/test/tx1.jfif" height="54" width="54"></a>
            <a class="user-name" href="#"><strong>一条小团团</strong></a>
            <a class="userset" href="#"></a>
            <div class="add-pic-a mt20">
                <a href="{:url('home/UserPhoto/piclist')}"><strong>14</strong>
                    <p>采集</p></a>
                <a href="{:url('home/userphoto/index')}"><strong>14</strong>
                    <p>画板</p></a>
                <a href=""><strong>14</strong>
                    <p>粉丝</p></a>
            </div>
        </div>
    </div>
</div>
<!--{$varname?='xxx'}-->
<!--采集图片模态框-->
<div class="modal mt50 fade" id="cai-pic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog frame-content">
        <div class="modal-content">
            <div class="">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="content-left">
                <div class="your-pic text-center">
                    <div class="yp">
                        <img src="/static/home/test/01c42c37c676b6d621dc4401662f9e4f59437bfa9de1c-88rSRR_fw658.jfif"
                             alt="">
                    </div>
                    <textarea placeholder="点击添加描述（最多 255 字）" maxlength="255" class="desc"></textarea>
                </div>
                <div class="bq">
                    <div class="tagsinput-primary form-group">
                        <input name="tagsinput" id="tagsinputval" class="tagsinput" data-role="tagsinput" value=""
                               placeholder="输入后回车">
                    </div>
                </div>
            </div>

            <div class="content-right">
                <p>采集</p>
                <p><input id="search-a" type="text" placeholder="搜索或创建画板"></p>
                <div class="reminder">
                    <span></span>
                    <span class="yet">这张图片已经在你的 <a href="">画板名</a> 画板里.</span>
                </div>
                <div class="addto-a mt10">
                    <ul id="huaban">
                        <li><span>画板一</span><button>采下来</button></li>
                        <li><span>画板二</span><button>采下来</button></li>
                        <li><span>画板三</span><button>采下来</button></li>
                    </ul>
                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>


{/block}

{block name="top"}
<script>
    $(function () {
        // 右下角帮助, 反馈, 人工, 添加画板, 添加采集
        $(".help").bind({
            mouseover: function () {
                $('.help_hint').show();
            }
        });
        $(".help_hint").bind({
            mouseover: function () {
                $('.help_hint').show();
            }, mouseout: function () {
                $('.help_hint').hide();
            }
        });

        $(".add-pic").bind({
            mouseover: function () {
                $('.add_hint').show();
            }
        });
        $(".add_hint").bind({
            mouseover: function () {
                $('.add_hint').show();
            }, mouseout: function () {
                $('.add_hint').hide();
            }
        });

        // 固定的顶部导航条无变化
        $('#header_top_left_title li a').css({'color': 'black'});
        $('.header_ta').css({'background': '#fff'});
        $('#header_top_left_logo img').attr('src', '/static/home/images/logo.svg');
        $('#header_top_left_title .menu2').css({'background': 'url("/static/home/images/menu_sprite.svg") 0 -248px no-repeat;'});
        $('.search input').css({'background-color': 'rgba(96, 96, 96, 0.2)', 'border': '1px solid #000'});
        $('#rigister').css({'background-color': '#d9d9d9', 'color': '#444'});


    });

    // 瀑布流部分
    $(function () {
        var $container = $('#masonry');
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.pic-photo',
                columnWidth: '.pic-photo',
                gutter: 14,
                isResizeBound: true,
                isAnimated: true
            });
        });
    });
    var dataInt = {
        'data': [
            {'src': '01c42c37c676b6d621dc4401662f9e4f59437bfa9de1c-88rSRR_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1d6781569238b14290ab5fb8094e3e0b143de28524b07-L9kIQR_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'}
        ]
    };

    setTimeout(function () {
        for (i = 0; i < dataInt['data'].length; i++) {
            var $pic_photo =
                '<div class="pic-photo">' +
                '<div class="box">' +
                '<img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '">' +
                '<div class="add-cj clearfloat">' +
                '<div class="left-btn">' +
                '<button data-toggle="modal" data-target="#cai-pic">采集</button>' +
                '</div>' +
                '<div class="right-btn">' +
                '<button></button>' +
                '</div>' +
                '</div>' +
                '<p class="works-info">【深圳插画师“yusayusayusa ” 的原创作品 —— 百词斩插图欣赏】</p>' +
                '<div class="user-add">' +
                '<a href=""><img class="head-p" src="/static/home/test/tx1.jfif"></a>' +
                '<div class="add-src">' +
                '<a href="">一giao我嘞giao用户</a>&nbsp;&nbsp;<span>采集到</span>' +
                '<a href="">电影海报-动作犯罪类</a>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';

            $('.grid').append($pic_photo);
        }
        // 点击喜欢
        var likep = $('.right-btn button');
        for (var i = 0; i < likep.length; i++) {
            $(likep).attr('likepic', '');
            (function (x) {
                $(likep)[x].onclick = function () {
                    if ($(this).attr('likepic') == '') {
                        $(this).css({'background-position': '14px -51px'});
                        $(this).attr('likepic', '1');
                    } else if ($(this).attr('likepic') == '1') {
                        $(this).css({'background-position': '14px 9px'});
                        $(this).attr('likepic', '');
                    }
                }
            })(i);
        }

        // 瀑布流插件代码
        var $grid = $('.grid').masonry({
            itemSelector: '.pic-photo',
            columnWidth: '.pic-photo',
            percentPosition: true,
        });

        $grid.imagesLoaded().progress(function () {
            $grid.masonry('layout');
        });
    },0);


    $(window).scroll(function () {
        var scrollTop = Math.ceil($(this).scrollTop());
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight >= scrollHeight) {
            load();
        }
    });

    // 追加图片
    function load() {
        for (i = 0; i < dataInt['data'].length; i++) {
            var $pic_photo = $(
                '<div class="pic-photo">' +
                '<div class="box">' +
                '<img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '">' +
                '<p class="works-info">【深圳插画师“yusayusayusa ” 的原创作品 —— 百词斩插图欣赏】</p>' +
                '<div class="user-add">' +
                '<a href=""><img class="head-p" src="/static/home/test/tx1.jfif"></a>' +
                '<div class="add-cj clearfloat">' +
                '<div class="left-btn">' +
                '<a href="">采集</a>' +
                '</div>' +
                '<div class="right-btn">' +
                '<button></button>' +
                '</div>' +
                '</div>' +
                '<div class="add-src">' +
                '<a href="">一giao我嘞giao用户</a>&nbsp;&nbsp;<span>采集到</span>' +
                '<a href="">电影海报-动作犯罪类</a>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>'
            );

            var $grid = $('.grid').masonry({
                itemSelector: '.pic-photo',
                columnWidth: '.pic-photo',
                percentPosition: true
            });
            $grid.append($pic_photo).masonry("appended", $pic_photo);


            $grid.imagesLoaded(function () {
                $grid.masonry();
            });


        }
    }

    // 采集图片的描述框
    $('.desc').focus(function () {
        $(this).css({'border': '1px solid #ccc', 'background': '#fff'});
    });
    $('.desc').blur(function () {
        $(this).css({'border': 'none', 'background': '#F2F2F2'});
    });
    
    // 采集到画板样式
    $('#huaban li').mouseover(function () {
        $(this).css({'background-image':'linear-gradient(to right, #ededed, #fff)'});
        $(this).find('button').css({'display':'block'});
    });

    $('#huaban li').mouseout(function () {
        $(this).css({'background-image':''});
        $(this).find('button').css({'display':'none'});
    });



</script>

{/block}
